import React, { useEffect, useRef, MutableRefObject,memo } from 'react'
import {  history } from 'umi'
import { useObserverHook } from '@/hooks'

let observer: IntersectionObserver
const Observer: React.FC = () => {
    const divRef: MutableRefObject<any> = useRef(null)
    // useEffect(() => {
    //     observer = new IntersectionObserver((entries) => {
    //         console.log(entries)
    //     })
    //     observer.observe(divRef.current)
    //     return () => {
    //         if (observer) {
    //             // 解绑元素
    //             observer.unobserve(divRef.current)
    //             // 停止监听
    //             observer.disconnect()
    //         }
    //     }
    // })
    useObserverHook('observer',(v)=>{
        console.log(v)
    })
    return (
        <div ref={divRef} id="observer" onClick={()=>history.push('/')} style={{ width: '100px', height: '100px', background: 'red', marginTop: '1200px' }}></div>
    )
}

export default memo(Observer)